<template>
  <div class="wrapper" style="position: absolute; z-index: 200;top: 14px;width: auto">
    <div class="selectModelType">
      <div class="tip"><p>Echart Popup</p></div>
      <el-button type="primary" size="mini" @click="loadLine()">加载线</el-button>
      <el-button type="primary" size="mini" @click="loadPoint">加载点</el-button>
      <br><br>
      <el-button type="primary" size="mini" @click="nearest()">最近点</el-button>
      <el-button type="primary" size="mini" @click="slice()">切片</el-button>
    </div>
  </div>
</template>

<script>
import nearestPointOnLine from '@turf/nearest-point-on-line';
import lineSlice from '@turf/line-slice';
import {lineString, point} from '@turf/helpers';

export default {
  name: "turfJs",
  components: {
    // myViewer
  },
  data() {
    return {
      pointArr: [
        [34.589368, 112.170593],
        [34.813106, 114.137631]
      ],//
      lineString: [],//
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
    },
    loadLine() {
      console.log("加载线");
      $.getJSON('static/data/QieGe/line.json', (data) => {
        this.lineString = data.features[0].geometry.coordinates;
        let layerGeo = L.geoJSON(data, {
          fillColor: "#FF0000",
          fillOpacity: 0.5,
          color: "#FF0000",
          weight: 4
        });
        layerGeo.addTo(leafletMap);
        leafletMap.flyToBounds(layerGeo.getBounds());
      })
    },
    loadPoint() {
      let divDom = document.createElement("div");
      divDom.style.width = 11 + "px";
      divDom.style.height = 11 + "px";
      divDom.style.backgroundColor = 'rgb(255 0 0)';
      divDom.style.borderRadius = "50%";
      divDom.style.border = "1px solid";

      let myIcon = L.divIcon({html: divDom, className: 'leaflet-circle-marker'});
      let marker1 = L.marker([34.589368, 112.170593],
          {
            icon: myIcon,
            iconSize: [12, 12],
            title: "自定义小圆点1",
            riseOnHover: true
          }).addTo(leafletMap);

      let marker2 = L.marker([34.813106, 114.137631],
          {
            iconSize: [12, 12],
            title: "自定义小圆点2",
            riseOnHover: true
          }).addTo(leafletMap);
    },
    nearest() {
      if (this.lineString.length === 0) return
      console.log(this.pointArr);

      let line = lineString(this.lineString);
      let pt = point(this.pointArr[0].reverse());

      let snapped = nearestPointOnLine(line, pt, {units: 'miles'});
      console.log(snapped)

      let marker3 = L.marker(snapped.geometry.coordinates.reverse(),
          {
            iconSize: [12, 12],
            title: "最近的点",
            riseOnHover: true
          }).addTo(leafletMap);
    },
    slice() {
      let line = lineString(this.lineString);
      let color = [
        '#4c8dae', '#cb3a56', '#2edfa3', '#ae7000',
        '#725e82', '#057748', '#44cef6', '#c9dd22',
        '#000'];
      let pointArr = [
        [110.511,35.048],//0
        [111.099,34.886],//1
        [111.478,35.057],//2
        [112.236,34.312],//3
        [113.423,35.012],//4
        [114.717,35.214],//5
        [115.219,34.642],//6
      ];
      pointArr.forEach((item,index) => {
        this.addPointToMap(item,'',color[index])
      })
      let nearArr = pointArr.map((p) => {
        let snapped = nearestPointOnLine(line, point(p), {units: 'miles'});//为什么改变line？
        return snapped.geometry.coordinates
      })
      //运行到这里，line被修改了
      line = lineString(this.lineString);
      nearArr.forEach((item,index) => {
        this.addPointToMap(item,'50%',color[index])
      })

      this.addSliceLineToMap(pointArr[2],pointArr[3],line,color[2])
      this.addSliceLineToMap(pointArr[3],pointArr[4],line,color[3])
      this.addSliceLineToMap(pointArr[4],pointArr[5],line,color[4])

    },
    addSliceLineToMap(p1,p2,line,color){
      let start = point(p1);
      let stop = point(p2);
      let sliced = lineSlice(start, stop, line);
      console.log(sliced)//是个GeoJSON格式

      let layerGeo = L.geoJSON(sliced, {
        fillColor: color,
        fillOpacity: 0.5,
        color: color,
        weight: 4
      });
      layerGeo.addTo(leafletMap);
    },
    addPointToMap(location,radius,color){
      let markHTML = '<div class="mark-circle-nodata-div" style="background-color:' +
          color + ';border-radius:'+ radius + '"></div>';
      const divIcon = L.divIcon({
        className: 'leaflet-custom-circle',
        html: markHTML,
        iconSize: [8, 8],
      });
      let myMarker = L.marker([].concat(location).reverse(), {
        icon: divIcon,
        iconSize: [8, 8],
        riseOnHover: true
      });
      myMarker.addTo(leafletMap)
    },
  }
}
</script>

<style>
.mark-circle-nodata-div{
  width: 8px;
  height: 8px;
  z-index: 999;
  border: 1px solid #0b25d7;
}

</style>
